<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 定时任务管理平台</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    
    <style>
    /* 液态玻璃登录页面样式 */
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-gradient-1);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
        padding: 2rem;
        position: relative;
        overflow: hidden;
    }

    /* 动态背景粒子效果 */
    .login-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
        animation: float 20s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        33% { transform: translateY(-20px) rotate(120deg); }
        66% { transform: translateY(10px) rotate(240deg); }
    }

    .login-wrapper {
        width: 100%;
        max-width: 420px;
        position: relative;
        z-index: 2;
    }

    /* 液态玻璃登录卡片 */
    .login-card {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-heavy);
        -webkit-backdrop-filter: var(--glass-blur-heavy);
        border: 1px solid var(--glass-border);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--glass-shadow);
        overflow: hidden;
        animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
        pointer-events: none;
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(60px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 液态玻璃登录头部 */
    .login-header {
        background: rgba(0, 122, 255, 0.15);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--glass-border);
        color: #1C1C1E;
        padding: 3rem 2rem 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .login-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 30% 20%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 70% 80%, rgba(0, 122, 255, 0.1) 0%, transparent 50%);
        animation: headerGlow 8s ease-in-out infinite;
    }

    @keyframes headerGlow {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    .logo-container {
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 2;
    }

    .logo-icon {
        font-size: 3.5rem;
        color: var(--primary-color);
        animation: logoFloat 3s ease-in-out infinite;
        filter: drop-shadow(0 4px 8px rgba(0, 122, 255, 0.3));
    }

    @keyframes logoFloat {
        0%, 100% {
            transform: translateY(0) scale(1) rotate(0deg);
        }
        50% {
            transform: translateY(-10px) scale(1.05) rotate(180deg);
        }
    }

    .login-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 2;
        color: #1C1C1E;
        text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    }

    .login-subtitle {
        opacity: 0.8;
        font-size: 1rem;
        position: relative;
        z-index: 2;
        color: #6C6C70;
        text-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
    }

    /* 液态玻璃登录主体 */
    .login-body {
        padding: 2.5rem 2rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: var(--glass-blur-light);
        -webkit-backdrop-filter: var(--glass-blur-light);
        position: relative;
    }

    .login-form {
        margin-bottom: 0;
    }

    .form-group {
        margin-bottom: 1.8rem;
        position: relative;
    }

    /* 液态玻璃输入组 */
    .input-group {
        position: relative;
        display: flex;
        align-items: center;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-light);
        -webkit-backdrop-filter: var(--glass-blur-light);
        border: 1px solid var(--glass-border);
        border-radius: var(--border-radius-sm);
        transition: var(--transition);
        overflow: hidden;
    }

    .input-group::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .input-group:focus-within::before {
        transform: translateX(100%);
    }

    .input-group:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25);
        transform: translateY(-2px);
    }

    .input-icon {
        position: absolute;
        left: 1rem;
        color: var(--primary-color);
        z-index: 2;
        font-size: 1.1rem;
        transition: var(--transition);
    }

    .input-group:focus-within .input-icon {
        color: var(--primary-color);
        transform: scale(1.1);
    }

    /* 液态玻璃表单控件 */
    .form-control {
        padding: 1rem 1rem 1rem 3rem;
        height: 3.2rem;
        border: none;
        border-radius: var(--border-radius-sm);
        font-size: 1rem;
        background: transparent;
        color: #1C1C1E;
        transition: var(--transition);
        width: 100%;
    }

    .form-control::placeholder {
        color: #6C6C70;
        opacity: 0.8;
    }

    .form-control:focus {
        outline: none;
        background: transparent;
        color: #1C1C1E;
    }

    /* 液态玻璃登录按钮 */
    .btn-login {
        width: 100%;
        height: 3.2rem;
        border-radius: var(--border-radius-sm);
        font-size: 1.1rem;
        font-weight: 600;
        background: var(--gradient-primary);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        transition: var(--transition);
        position: relative;
        overflow: hidden;
        backdrop-filter: var(--glass-blur-light);
        -webkit-backdrop-filter: var(--glass-blur-light);
    }

    .btn-login::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-login:hover::before {
        left: 100%;
    }

    .btn-login:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 122, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .btn-login:active {
        transform: translateY(-1px);
    }

    .btn-text {
        position: relative;
        z-index: 2;
    }

    .btn-icon {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 2;
    }

    .btn-login:hover .btn-icon {
        transform: translateX(8px);
    }

    /* 液态玻璃登录页脚 */
    .login-footer {
        padding: 1.5rem 2rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: var(--glass-blur-light);
        -webkit-backdrop-filter: var(--glass-blur-light);
        text-align: center;
        border-top: 1px solid var(--glass-border);
        position: relative;
    }

    .login-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
        pointer-events: none;
    }

    .login-footer p {
        margin: 0;
        font-size: 0.9rem;
        color: #6C6C70;
        position: relative;
        z-index: 2;
    }

    .login-footer i {
        color: var(--success-color);
        animation: shieldPulse 2s ease-in-out infinite;
    }

    @keyframes shieldPulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    /* 暗黑模式适配 */
    [data-theme="dark"] .login-container {
        background: var(--bg-gradient-2);
    }

    [data-theme="dark"] .login-card {
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .login-header {
        background: rgba(0, 122, 255, 0.2);
        color: #ffffff;
    }

    [data-theme="dark"] .login-header::before {
        background: 
            radial-gradient(circle at 30% 20%, rgba(0, 122, 255, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 70% 80%, rgba(0, 122, 255, 0.15) 0%, transparent 50%);
    }

    [data-theme="dark"] .logo-icon {
        color: #ffffff;
        filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
    }

    [data-theme="dark"] .login-title {
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .login-subtitle {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .login-body {
        background: rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .input-group {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] .form-control {
        color: #ffffff;
    }

    [data-theme="dark"] .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    [data-theme="dark"] .input-icon {
        color: var(--primary-color);
    }

    [data-theme="dark"] .login-footer {
        background: rgba(0, 0, 0, 0.2);
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .login-footer p {
        color: rgba(255, 255, 255, 0.7);
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
        .login-container {
            padding: 1rem;
        }
        
        .login-wrapper {
            max-width: 100%;
        }
        
        .login-header {
            padding: 2rem 1.5rem 1.5rem;
        }
        
        .login-body {
            padding: 2rem 1.5rem;
        }
        
        .login-footer {
            padding: 1rem 1.5rem;
        }
        
        .login-title {
            font-size: 1.6rem;
        }
        
        .logo-icon {
            font-size: 3rem;
        }
    }

    /* 加载动画 */
    .login-card.loading {
        animation: cardLoading 1.5s ease-in-out infinite;
    }

    @keyframes cardLoading {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-5px) scale(1.02);
        }
    }

    /* 错误状态 */
    .input-group.error {
        border-color: var(--danger-color);
        box-shadow: 0 0 0 0.2rem rgba(255, 59, 48, 0.25);
    }

    .input-group.error .input-icon {
        color: var(--danger-color);
    }

    /* 成功状态 */
    .input-group.success {
        border-color: var(--success-color);
        box-shadow: 0 0 0 0.2rem rgba(52, 199, 89, 0.25);
    }

    .input-group.success .input-icon {
        color: var(--success-color);
    }

    /* Flash消息样式 */
    .alert {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-light);
        -webkit-backdrop-filter: var(--glass-blur-light);
        border: 1px solid var(--glass-border);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--glass-shadow);
        color: #1C1C1E;
        font-weight: 500;
        position: relative;
        overflow: hidden;
    }

    .alert::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .alert > * {
        position: relative;
        z-index: 1;
    }

    .alert-danger {
        border-color: rgba(255, 59, 48, 0.3);
        background: rgba(255, 59, 48, 0.1);
    }

    .alert-warning {
        border-color: rgba(255, 149, 0, 0.3);
        background: rgba(255, 149, 0, 0.1);
    }

    .alert-info {
        border-color: rgba(0, 122, 255, 0.3);
        background: rgba(0, 122, 255, 0.1);
    }

    .alert-success {
        border-color: rgba(52, 199, 89, 0.3);
        background: rgba(52, 199, 89, 0.1);
    }

    .btn-close {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .btn-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    /* 主题切换按钮 */
    .theme-toggle {
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 1000;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.1);
        color: #1C1C1E;
        padding: 0.75rem;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: pointer;
    }

    .theme-toggle:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .theme-toggle:active {
        transform: scale(0.95);
    }

    .theme-toggle i {
        font-size: 1.1rem;
        transition: transform 0.3s ease;
    }

    [data-theme="dark"] .theme-toggle {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    [data-theme="dark"] .theme-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.25);
    }
    </style>
</head>
<body>
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="theme-toggle" title="切换主题">
        <i id="theme-icon" class="fas fa-moon"></i>
    </button>

<div class="login-container">
    <div class="login-wrapper">
        <div class="login-card">
            <div class="login-header">
                <div class="logo-container">
                        <i class="fas fa-cogs logo-icon"></i>
                </div>
                <h2 class="login-title">欢迎回来</h2>
                <p class="login-subtitle">登录到定时任务管理平台</p>
            </div>
            
            <div class="login-body">
                <!-- Flash消息显示 -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }} alert-dismissible fade show mb-3" role="alert">
                                <i class="fas fa-{{ 'check-circle' if category == 'success' else 'exclamation-triangle' if category == 'warning' else 'info-circle' if category == 'info' else 'times-circle' }} me-2"></i>
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <form method="POST" action="{{ url_for('login') }}" class="login-form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-icon">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" class="form-control" id="username" name="username" 
                                   placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-icon">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" id="password" name="password" 
                                   placeholder="请输入密码" required>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-login">
                        <span class="btn-text">登录</span>
                        <i class="fas fa-arrow-right btn-icon"></i>
                    </button>
                </form>
            </div>
            

        </div>
    </div>
</div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
    // 主题切换功能
    document.addEventListener('DOMContentLoaded', function() {
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const body = document.body;
        
        // 从localStorage获取保存的主题
        const savedTheme = localStorage.getItem('theme') || 'light';
        
        // 应用保存的主题
        function applyTheme(theme) {
            if (theme === 'dark') {
                body.setAttribute('data-theme', 'dark');
                themeIcon.className = 'fas fa-sun';
                themeToggle.title = '切换到亮色主题';
            } else {
                body.removeAttribute('data-theme');
                themeIcon.className = 'fas fa-moon';
                themeToggle.title = '切换到暗色主题';
}
        }
        
        // 初始化主题
        applyTheme(savedTheme);
        
        // 主题切换事件
        themeToggle.addEventListener('click', function() {
            const currentTheme = body.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            // 应用新主题
            applyTheme(newTheme);
            
            // 保存到localStorage
            localStorage.setItem('theme', newTheme);
            
            // 添加切换动画效果
            themeToggle.style.transform = 'rotate(180deg)';
            setTimeout(() => {
                themeToggle.style.transform = 'rotate(0deg)';
            }, 300);
        });
        
        console.log('登录页面加载完成，主题切换功能已启用');
    });
    </script>
</body>
</html> 